require('./mobileAdapter.js');
require('../sass/index.scss');

// 公有状态
let commonState = {
    liHeight: 116 / 75, // 每一个数字或小牛的高度, 这里除以75是因为在不同屏幕下求得的值一样，单位rem
    resultArr: [], // 保存生成的数字
    times: 0, // 获得积分的倍数
    score: 100 // 当前积分
};


// 滚动栏相关
let rollHandler = (function() {
    // 三列滚动图
    let $column = $('.column');
    let $column1 = $('.column1');
    let $column2 = $('.column2');
    let $column3 = $('.column3');

    // 生成min到max的随机整数
    function ranNum(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    // 绑定事件
    function bindEvent() {
        // 开始滚触发事件
        $column.on('animationstart', function() {
            let randomNum = ranNum(-1, 9);
            let resultArr = commonState.resultArr;
            resultArr.push(randomNum);
            if (resultArr.length === 4) { // 第三列开始滚
                console.log(resultArr);
                ticketHandler.updateTicketSrc();
            }
        });

        // 滚动动画结束触发
        $column.on('animationend', function() {
            let resultArr = commonState.resultArr;
            let score = commonState.score;
            let times = commonState.times;

            stopRoll($(this), resultArr[++resultArr[0].count]); // 先将结束的列数加1，然后再将那一列滚到指定位置
            if (resultArr[0].count === 3 && times !== 0) { // 三列都滚停了
                ticketHandler.ticketAnimate(); // 出票动画
                if (resultArr[1] < 6) {
                    score = score - times * 10;
                } else if (resultArr[1] === resultArr[2] && resultArr[2] === resultArr[3]) {
                    score = score + times * 10 * 6;
                } else {
                    score = score + times * 10;
                }

                commonState.score = score;
                btnsHandler.updateBtnState(); // 更新按钮状态
                scoreHandler.updateScore(); // 更新分数
            }
        });
    }

    // 开始滚
    function startRoll($column) {
        $column.css('bottom', -0.5 * commonState.liHeight + 'rem');
        $column.addClass('rolldown');
    }

    // 停止滚并定位到指定位置，target代表是滚到哪个数字，-1代表小牛
    function stopRoll($column, target) {
        target = (target === 0 ? target : (target || -1)); // 此处必须判断是否为0，不能直接使用target = target||-1; 这样target永远取不到0
        $column.removeClass('rolldown');
        $column.css('bottom', -(target + 1.5) * commonState.liHeight + 'rem'); // // 必须先移除start-rolldown类才行！
    }

    return {
        init() {
            bindEvent();
        },

        start() {
            startRoll($column1);
            setTimeout(() => {
                startRoll($column2);
            }, 400);
            setTimeout(() => {
                startRoll($column3);
            }, 800);
        }
    }
})();


// go按钮相关
let goHandler = (function() {
    // go按钮
    let $goBtn = $('.go');

    // 指示灯
    let $lightOn = $('.light-on');
    let $lightOff = $('.light-off');

    function bindEvent() {
        // 点击go按钮开始自身动画和滚动事件
        $goBtn.on('click', function() {
            let resultArr = commonState.resultArr;
            if ((resultArr[0] && resultArr[0].count === 3) || resultArr.length === 0) {
                resultArr.length = 0; // 清空数组
                resultArr.push({ count: 0 }); // 表示已经结束滚动的列的数量
                ticketHandler.resetTicket(); // 恢复票初始位置
                rollHandler.start(); // 开始三栏滚动
                startGoAnimate(); // 开始go动画
            }
        });
    }

    // 点击go按钮时的动画
    function startGoAnimate() {
        $lightOff.hide();
        $lightOn.show();

        $goBtn.animate({ 'bottom': newPx2rem(1206 - 587) + 'rem' }, 'normal').animate({ 'bottom': newPx2rem(1206 - 328 - 139) + 'rem' }, 'normal', function() {
            $lightOn.hide();
            $lightOff.show();
        });
    }

    return {
        init() {
            bindEvent()
        }
    }
})();


// ticket相关
let ticketHandler = (function() {
    // 得到的票
    let $ticket = $('.ticket');

    // 出票动画
    function ticketAnimate() {
        $ticket.stop().animate({ 'bottom': '0%' }, 2000);
    }

    // 更新票
    function updateTicketSrc() {
        let originSrc = $ticket.attr('src');
        let targetSrc = originSrc;
        let resultArr = commonState.resultArr;
        if (resultArr[1] === resultArr[2] && resultArr[2] === resultArr[3] && targetSrc.indexOf('10') === -1) {
            targetSrc = originSrc.replace(/rs(\d+)/, 'rs10');
        } else {
            targetSrc = originSrc.replace(/rs(\d)+/, function(all, num) {
                if ([-1, 0, 1].indexOf(resultArr[1]) !== -1) {
                    return 'rs1';
                } else {
                    return 'rs' + resultArr[1];
                }
            })
        }
        $ticket.attr('src', targetSrc);
    }

    // 恢复票初始位置
    function resetTicket(argument) {
        $ticket.stop().css('bottom', '100%');
    }

    return {
        ticketAnimate,
        resetTicket,
        updateTicketSrc
    }
})();


// 按钮相关
let btnsHandler = (function() {
    // 三个按钮
    let $threeBtns = $('.three-btn').children();

    // 更新按钮状态
    function updateBtnState() {
        let score = commonState.score;
        if (score >= 30) {
            $threeBtns.addClass('avaible');
        } else if (score >= 20) {
            $threeBtns.not(':last-child').addClass('avaible');
            $threeBtns.last().removeClass('active avaible');
        } else if (score >= 10) {
            $threeBtns.first().addClass('avaible');
            $threeBtns.not(':first-child').removeClass('avaible active');
        } else {
            $threeBtns.removeClass('avaible active');
        }

        commonState.times = $threeBtns.index($threeBtns.parent().find('.active')) + 1;
    }

    function bindEvent() {
        // 翻倍按钮点击
        $threeBtns.on('click', function() {
            let $this = $(this);
            if ($this.hasClass('avaible')) {
                if (!$this.hasClass('active')) {
                    $this.addClass('active').siblings().removeClass('active');
                    commonState.times = $threeBtns.index($this) + 1; // 倍数
                }
            } else {
                return false;
            }
        });
    }

    return {
        init() {
            bindEvent();
        },
        updateBtnState
    }
})();


// 分数控制
let scoreHandler = (function() {
    let $scoreSpan = $('.score').find('span');

    function updateScore() {
        $scoreSpan.text(commonState.score);
    }
    return {
        updateScore
    };
})();


// 入口函数
function main() {
    rollHandler.init();
    goHandler.init();
    btnsHandler.init();

    // 按钮初始化
    (function() {
        btnsHandler.updateBtnState();
        scoreHandler.updateScore();
    })();
}

main();